﻿@{

    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner管理</title>
    <script src="~b/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="~/lib/vue.js"></script>
    <script src="~/lib/axios.js"></script>

    <style>
        .BannerManage {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            margin: 0 auto;
        }

        .hide {
            display: none;
        }

        .modal {
            /* 上左定位50%后 上左margin-高度和宽度的一半保证div在中心位置 */
            position: fixed;
            left: 50%;
            top: 50%;
            width: 700px;
            height: 400px;
            margin-left: -350px;
            margin-top: -350px;
            z-index: 10;
            background-color: #ffff;
        }

        .shade {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

        .text-k {
            color: #606266;
        }

        .Huiform {
            margin-top: 80px;
        }

        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
            table tr:hover {
                background-color: antiquewhite;
                z-index: 99;
            }

        #bannerTable {
            width: 100%;
        }

        .cl {
            padding: 5px 5px;
            /* 去掉按钮边框 */
            border: none;
            cursor: pointer;
            color: #fff;
            /* 设置圆角角度 */
            border-radius: 5px 5px 5px 5px;
            /* 移动鼠标前的效果 渐变色 */
            background-image: linear-gradient(#5883a4, #2e7497);
        }

            .cl:hover {
                /* 移动鼠标后的效果 渐变色 */
                background-color:antiquewhite;
            }

        .text-c {
            color: rgb(144, 147, 153);
            z-index: 1;
        }

        .ml-5 {
            background-color: rgb(189, 188, 188);
            border: none;
        }

        .ml-6 {
            background-color: rgb(189, 188, 188);
            border: none;
        }

        .ml-5:hover {
            background-color: rgb(136,145,155);
        }

        .ml-6:hover {
            background-color: rgb(136,145,155);
        }
        /* a链接去除下划线*/
        a {
            text-decoration: none;
        }
        .h-1 {
            color: #666666;
            font-size: 20px;
            line-height: 39px;
            position: absolute;
            top: -25px;
            left: 0px;
        }
        .close {
            position: absolute;
            top: 0px;
            right: 0px;
            /* 去掉按钮边框 */
            border: none;
            cursor: pointer;
            color: #ffffff;
            /* 设置圆角角度 */
            /*border-radius: 5px 5px 5px 5px;*/
            /* 移动鼠标前的效果 渐变色 */
            background-image: linear-gradient(#4CAF50, #5883a4);
        }
          .close:hover {
                /* 移动鼠标后的效果 渐变色 */
                background-image: linear-gradient(#5883a4, #666666);
            }
    </style>
</head>

<body>

    <div class="BannerManage">

        <div>
            <span class="l">
                <br />  <br />  

                <a href="javascript:;" class="cl" v-on:click="openModal"><i class="icon-plus"></i> 添加Banner</a>
            </span>
            <br /><br />
        </div>
        <!-- 模态框 -->
        <div class="shade hide"></div>
        <div class="modal hide">
            <div class="Huiform">
                <h2 class="h-1">添加Banner</h2>
                <button v-on:click="Close" class="close">关闭</button>
                <table class="table table-bg">
                    <tbody>
                        <tr>
                            <th class="text-r">Banner图片：</th>
                            <td><input type="file" v-on:change="upload" style="width:300px" class="" name="" multiple datatype="*2-120" nullmsg="Banner图片不能为空"><button v-on:click="uploadFlie">banner图片上传</button></td>
                           
                        </tr>
                        <tr>
                            <th class="text-r">跳转地址：</th>
                            <td><input type="text" style="width:300px" class="input-text" v-model="Url" value="" placeholder="" id="url" name="url"></td>
                        </tr>
                        <tr>
                            <th class="text-r">备注：</th>
                            <td><input type="text" style="width:300px" v-model="remark" class="input-text" value="" placeholder="" id="remark" name="remark"></td>
                        </tr>
                        <tr>
                            <th></th>

                            <td><button v-on:click="send"> 确定</button></td>

                        </tr>
                    </tbody>
                </table>

            </div>

        </div>

        <table id="bannerTable">
            <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th width="300">Banner图片</th>
                    <th width="300">跳转地址</th>
                    <th width="130">添加时间</th>
                    <th>备注</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody>
                @*<tr class="text-k">
                    <td>1</td>
                    <td><image src="" style="height:100px;width:200px" /></td>
                    <td><a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a></td>
                    <td>2015.01.16 22:12:24</td>
                    <td class="text-l">这是一个备注</td>
                    <td class="f-14">
                        <button title="删除" href="javascript:;" onClick="del(this,'1')" class="ml-5" style="text-decoration:none">
                            <i class="icon-trash"></i>删除<tton>
                                <br /><button title="编辑" href="javascript:;" onClick="del(this,'1')" class="ml-6" style="text-decoration:none"><i class="icon-trash"></i>编辑<tton>
                    </td>
                </tr>
            </tbody>*@
            <tbody>
                <tr class="text-k" v-for="item  in BannerList" :key="item.id">
                    <td>{{item.id}}</td>
                    <td><image :src="item.image" style="height:100px;width:200px" /></td>
                    <td><a href="http://www.baidu.com" target="_blank">{{item.url}}</a></td>
                    <td>{{item.addTime}}</td>
                    <td class="text-l">{{item.remark}}</td>
                    <td class="f-14"><a href="#" v-on:click=" remove(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>


<script>

    var app = new Vue({
        el: '.BannerManage',
        data: {
    
            params: Object,
            Image: "",
            Url: "",
            remark: "",
            BannerList: []
        },
        mounted() {
            axios.get('/admin/GetBannerInfo').then(res => {

                this.BannerList = res.data.data.data;
                console.log(this.BannerList);

            }).catch(err => {


                console.log(err);
            });



        }
        ,

        methods: {
            upload(e) {  // 上传照片


                let file = e.target.files[0]
                console.log({ data: file })

                let param = new FormData() // 创建form对象
                param.append('files', file) // 通过append向form对象添加数据
                //console.log(param);                                 // 添加form表单中其他数据
                // FormData私有类对象，访问不到，可以通过get判断值是否传进去
                this.params = param;

                if (param.get('files') != null) {
                    console.log("有文件了")
                    this.params = param;
                    console.log(this.params.get('files'));

                }



            },//图片
            uploadFlie() {


                if (this.params.get('files') != null) {
                    axios.post('/admin/BannerFileSave', this.params, {
                        'Content-type': 'multipart/form-data'
                    })
                        .then(res => {
                            if (res.status == 200) {

                                this.Image = res.data[0];
                                console.log(this.Image);
                                alert("图片上传成功，请继续填写其他新闻信息");

                            }



                        }).catch(err => {

                            console.log(err)
                        });

                } else {
                    alert("未选择图片");

                }

            },
            remove(id) {
                alert("测试" + id);
                axios.post('/admin/DelectBanner', {
                    id: id
                }).then(res => {

                    if (res.data == 1) {
                        alert("删除成功");
                        axios.get('/admin/GetBannerInfo').then(res => {

                            this.BannerList = res.data.data.data;
                            console.log(this.BannerList);

                        }).catch(err => {


                            console.log(err);
                        });
                    }
                }).catch(err => {

                    alert("删除失败");
                });

            }
            ,
            send() {
                if (this.Image == "" ) {

                    alert("请完善信息谢谢！");
                    return;
                }
                if (this.Url == "" && this.remark == "") {

                    alert("请完善信息谢谢！");
                    return;
                }
                if (this.remark == "") {

                    alert("请完善信息谢谢！");
                    return;
                }


                console.log(this.Image, this.Url, this.remark);
                axios.post('/admin/AddBanner', {
                    Image: this.Image,
                    Url: this.Url,
                    Remark: this.remark
                }).then(res => {

                    if (res.data == 1) {
                        alert(" 添加banner成功");
                        $('.modal,.shade').addClass('hide');
                        axios.get('/admin/GetBannerInfo').then(res => {

                            this.BannerList = res.data.data.data;
                            console.log(this.BannerList);

                        }).catch(err => {


                            console.log(err);
                        });
                    } else {
                        alert("添加失败");
                    }
                }


                ).catch(err => {

                    console.log(err);
                });

            },
            Close() {
                $('.modal,.shade').addClass('hide');

            },
            openModal() {
                $('.hide').removeClass('hide');
            },
            CloseModal() {
                $('.modal,.shade').addClass('hide');

            }

        }



    });
//  $(function(){
//      //添加按钮
//      $('.cl').click(function(){
//            $('.hide').removeClass('hide');
//        });
//         //取消按钮
//         $('.xs').click(function(){

//            $('.modal,.shade').addClass('hide');

//        });
//$('.cl').click(function(){

//});
//  });
</script>